<template>
  <el-dialog v-model="addBusinessVisible" :title="businessId === 0 ? '业务类型创建' : '业务类型编辑'" width="700">
    <el-form ref="formRef" :rules="modalFormRule" :inline="true" :model="businessForm" class="demo-form-inline">
      <el-form-item label="业务模块" prop="module">
        <el-select v-model="businessForm.module" placeholder="请选择" clearable style="width: 160px">
          <el-option v-for="(value, key) in moudleList" :label="value" :value="key" :key="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="name">
        <el-input v-model="businessForm.name" placeholder="请输入" clearable />
      </el-form-item>
    </el-form>
    <div class="setting">
      <div class="sub-title">快捷处理设置</div>
      <el-alert title="添加业务处理的快捷操作和处理建议" type="info" show-icon :closable="false" />
      <el-tabs v-model="activeName2" class="tabs">
        <el-tab-pane label="快捷操作" name="quickProcess">
          <div ref="quickProcess" class="quick-process">
            <div v-for="(item, i) in quickProcessList" :key="item.id" class="process-item">
              <span class="index">{{ i + 1 }}</span>
              <el-select class="module" v-model="item.name" placeholder="请选择" clearable style="width: 140px">
                <el-option v-for="pItem in proceModules" :label="pItem.name" :value="pItem.value" :key="pItem.value" />
              </el-select>
              <span class="separate">-</span>
              <el-select class="option" v-model="item.option" placeholder="请选择" clearable style="width: 140px">
                <el-option v-for="oItem in optionList" :label="oItem.name" :value="oItem.value" :key="oItem.value" />
              </el-select>
              <el-input class="description" v-model="item.description" placeholder="请输入" clearable style="width: 230px" />
              <el-button type="danger" class="delete-btn" link @click="deleteProcess(i)">删除</el-button>
            </div>
          </div>
          <el-button icon="Plus" circle class="add" @click="addProcess" />
        </el-tab-pane>
        <el-tab-pane label="处理建议" name="handlingRecomm">
          <el-input
            v-model="businessForm.opinion"
            maxlength="240"
            style="width: 100%; resize: none"
            class="textarea"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddOrEditBusiness">
import { ref, reactive } from "vue";
import {
  getBusinessDetail,
  getBusinessModule,
  createBusiness,
  modifyBusiness
} from "@/api/modules/businessManagement/businessConfig";
import { ElMessage, FormRules } from "element-plus";
import type { FormInstance } from "element-plus";
const formRef = ref<FormInstance>();
const modalFormRule = reactive<FormRules>({
  module: [{ required: true, message: "内容不能为空", trigger: ["blur", "change"] }],
  name: [{ required: true, message: "内容不能为空", trigger: ["blur", "change"] }]
});
// 业务id
let businessId: any = 0;
const activeName2 = ref("quickProcess");
const quickProcessList = ref<any>([]);
const businessForm = reactive({
  id: 0,
  module: "",
  name: "",
  workflow: 0,
  opinion: "",
  desc: "",
  instruction: []
});
const proceModules = ref<any>([
  {
    name: "计算资源",
    value: "计算资源"
  },
  {
    name: "网络资源",
    value: "网络资源"
  },
  {
    name: "存储资源",
    value: "存储资源"
  }
]);
const optionList = ref<any>([
  {
    name: "创建",
    value: "创建"
  },
  {
    name: "编辑",
    value: "编辑"
  },
  {
    name: "删除",
    value: "删除"
  }
]);

const quickProcess = ref<any>(null);
// 查询业务模块
const moudleList = ref<any>([]);
const getModule = async () => {
  const { data } = await getBusinessModule();
  moudleList.value = data;
};
// 获取业务详情
const getDetail = async () => {
  const { data } = await getBusinessDetail(businessId);
  businessForm.id = data.id;
  businessForm.module = data.module;
  businessForm.name = data.name;
  businessForm.workflow = data.workflow;
  businessForm.opinion = data.opinion;
  businessForm.desc = data.desc;
  businessForm.instruction = data.instruction;
  quickProcessList.value = data.instruction ? data.instruction : [];
  if (data.opinion && (!data.instruction || data.instruction.length === 0)) {
    activeName2.value = "handlingRecomm";
  }
};
// 添加快捷操作
const addProcess = () => {
  console.log(quickProcessList.value);
  quickProcessList.value.push({
    name: "",
    option: "",
    description: ""
  });
  // 滚动条滚动到最下面
  quickProcess.value.scrollTop = quickProcess.value.scrollHeight;
};
// 删除快捷操作
const deleteProcess = index => {
  quickProcessList.value.splice(index, 1);
  quickProcessList.value.map((item, i) => {
    item.id = i + 1;
  });
};

let loading = false;
const addBusinessVisible = ref<boolean>(false);
// 打开弹窗
const openDialog = (id: number = 0) => {
  businessId = id;
  loading = false;
  // 重置表单
  businessForm.desc = "";
  businessForm.opinion = "";
  quickProcessList.value = [];
  formRef.value?.resetFields();
  activeName2.value = "quickProcess";
  active.value = 1;
  addBusinessVisible.value = true;
  getModule();
  if (businessId !== 0) {
    getDetail();
  }
};
// 关闭弹窗
const closeDialog = () => {
  loading = false;
  addBusinessVisible.value = false;
};
const active = ref(1);
// emit
const emit = defineEmits<{
  refresh: [];
}>();

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      loading = true;
      const paramsObj = { ...businessForm, instruction: quickProcessList.value };
      if (businessId === 0) {
        // 创建
        const { data } = await createBusiness(paramsObj);
        if (data) {
          ElMessage({
            type: "success",
            message: `操作成功!`
          });
          addBusinessVisible.value = false;
          // 重置表单
          businessForm.name = "";
          businessForm.desc = "";
          active.value = 1;
          emit("refresh");
        }
      } else {
        // 编辑
        const { data } = await modifyBusiness(businessId, paramsObj);
        if (data) {
          ElMessage({
            type: "success",
            message: `操作成功!`
          });
          addBusinessVisible.value = false;
          // 重置表单
          formEl?.resetFields();
          active.value = 1;
          emit("refresh");
        }
      }
    }
  });
};
defineExpose({
  openDialog,
  closeDialog
});
</script>
<style lang="scss" scoped>
.filter {
  width: 100%;
  height: 500px;
  overflow-y: auto;
  border: none;
  box-shadow: none;
}
.l-span {
  margin-bottom: 4px;
  font-size: 16px;
  color: var(--el-text-color);
}
:deep(.textarea) {
  textarea {
    height: 200px;
    resize: none;
  }
}
.process-item {
  margin-bottom: 10px;
  .index {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    color: #ffffff;
    text-align: center;
    background: var(--el-color-primary-light-2);
    border-radius: 100%;
  }
  .separate {
    margin: 0 10px;
  }
  .option {
    margin-right: 10px;
  }
  .delete-btn {
    margin-left: 10px;
  }
}
.add {
  margin-top: 10px;
  margin-left: 30px;
}
.quick-process {
  max-height: 300px;
  overflow-y: auto;
}
.setting {
  .sub-title {
    margin-bottom: 8px;
    line-height: 24px;
    color: var(--el-text-color);
  }
  .el-alert {
    margin-bottom: 24px;
    color: var(--el-text-color-primary);
    background-color: #1890ff19;
    border: 1px solid #1890ff59;
    :deep(.el-icon) {
      color: #1890ffff;
    }
  }
}
</style>
